<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/webjars/js/echarts.min.js"></script>
    <link rel="stylesheet" href="/webjars/css/layui.css">
    <script src="/webjars/layui.js"></script>
</head>
<body>
</div>
<div id="main" style="border: 1px solid bisque; width: 95vw; height: 95vh; margin: 0 10px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.getElementById('main'));

    layui.use(['element', 'layer', 'jquery'], function () {
        let element = layui.element;
        let $ = layui.jquery;

        setTrendECharsDate($);
    });

    function setTrendECharsDate(jquery) {
        jquery.ajax({
            url: '/api/lottery/history/sum/distribution',
            type: 'get',
            data: {},
            /*是否异步*/
            async: true,
            /*返回的数据类型*/
            dataType: "json",//返回数据类型
            /*这个值是默认的传参方式, 默认可以不指定, 只有传递json时需要指定*/
            contentType: 'application/x-www-form-urlencoded',
            success: function (response) {
                if (response.code === 200) {
                    option.xAxis.data = [];
                    option.series[0].data = [];

                    response.data.yData.forEach(x => {
                        option.series[0].data.push(x);
                    });
                    option.xAxis.data.push(...response.data.xData);
                    myChart.setOption(option);
                }
            }
        });
    }

    // 指定图表的配置项和数据
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [],
            type: 'bar'
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    //myChart.setOption(option);
</script>
</body>
</html>